<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        html,body{
            margin:0px;
            height: 100%;
            overflow: hidden;
        }
        header,nav,section,footer{
            border:1px solid #ccc;
        }
        header{
            height: 80px;
        }
        nav{
            float:left;
            width:220px;
            margin:0px 2px 2px 2px;
        }
        section{
            margin:2px 2px 2px 228px;
        }
        footer{
            height: 40px;
        }
    </style>
    <script type="text/javascript">
        function setHeight(){
            var screenHeight=document.body.offsetHeight;
            var moduleHeight=screenHeight-120;
            document.getElementById("mainModule").style.height=moduleHeight+"px";	
            document.getElementById("mainMenu").style.height=(moduleHeight-4)+"px";
            document.getElementById("mainPage").style.height=(moduleHeight-4)+"px";
        }
        function init(){
            setHeight();
            window.addEventListener("resize",setHeight,false);
        }
        window.addEventListener("load",init,false);
    </script>
</head>
<body>
    <header>top</header>
    <article id="mainModule">
        <nav id="mainMenu">菜单</nav>
        <section id="mainPage">主页面</section>
    </article>
    <footer>info</footer>
</body>
</html>